<template>
    <div :style="{ display: 'flex', height: data.bannerHeight + 'px' }">
        <!--走马灯-->
        <div style="flex: 1;">
            <el-carousel indicator-position="outside" :height="data.bannerHeight + 'px'">
                <el-carousel-item v-for="(item, index) in imgitems" :key="index">
                    <el-image class="carouselimg" :class="item.className" style="width: 100%; " :src="item.url"
                        fit="fill" />
                </el-carousel-item>
            </el-carousel>
        </div>
        <!--公告栏-->
        <div class="notice-wrapper">
            <NoticeBoard title="📌 最新公告" :list="data.announcementList" :loading="loading" moreLink="/home/policy" />
            <NoticeBoard title="📚 政策文件" :list="data.policyList" :loading="loading" moreLink="/home/policy" />
            <!-- <div class="notice-wrapper" style="width: 25%;margin-top: 20px;">
                <NoticeBoard title="📣 通知公告" :list="data.noticeList" :loading="loading" moreLink="/home/policy" />
            </div> -->
        </div>
    </div>
    <div class="quickEntrance">
        <span>快捷入口</span>
        <!-- <div class="cardbox"> -->
        <div style="display: flex;">
            <div class="selectcard" @click="router.push('/home/enterprise/payendowment')">
                <img class="icon" src="../assets/picture/icon-dysq.png" alt="" />
                <span>企业养老保险缴费</span>
            </div>
            <div class="selectcard" @click="router.push('/home/calculator/retireAge')">
                <img class="icon" src="../assets/picture/retireAge.png" alt=""  />
                <span>退休年龄计算器</span>
            </div>
            <div class="selectcard" @click="router.push('/home/calculator/retireMoney')">
                <img  class="icon" src="../assets/picture/retireMoney.png" alt="" />
                <span>退休金计算器</span>

            </div>
        </div>
    </div>


</template>
<script setup>
import router from '@/router';
import request from '@/utils/request';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
onMounted(() => {
    // 首次加载时,初始化高度
    data.screenWidth = window.innerWidth
    data.bannerHeight = 1080 / 1920 * data.screenWidth * 0.5
    // 窗口大小发生改变
    window.onresize = () => {
        data.screenWidth = window.innerWidth
        data.bannerHeight = 1080 / 1920 * data.screenWidth * 0.5
    }
})



const imgitems = [
    { className: 'welcome1', url: '/src/assets/picture/走马灯1.png' },
    { className: 'welcome2', url: '/src/assets/picture/走马灯2.png' },
    { className: 'welcome3', url: '/src/assets/picture/走马灯3.png' },
]
const data = reactive({
    bannerHeight: 0,
    screenHeight: 0,
    noticeList: [],//公告列表
    noticeType: "公告",
    policyList: [],
    announcementList: []
})

const loading = ref(true)

const load = () => {//查询所有公告
    request.get('/notice/searchTen', {
        params: {
            noticeType: "公告",
        }
    }).then(res => {
        data.announcementList = res.data
        loading.value = false
        data.total = res.data.total
    })
    request.get('/notice/searchTen', {
        params: {
            noticeType: "政策",
        }
    }).then(res => {
        data.policyList = res.data
        loading.value = false
        data.total = res.data.total
    })
}
load()


</script>
<style scoped>
.noticebox {
    flex: 1;
    color: black;
    margin-left: 2%;
    box-shadow: 2px solid rgb(134, 133, 133);
    background-color: rgb(246, 239, 239);
}

.noticetitle {
    white-space: nowrap;
    font-size: large;

}

.carouselimg {
    width: 100%;
    height: inherit;
}

.notice-board {
    flex: 1;
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
    font-size: 14px;
}

.board-header {
    display: flex;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
    border-left: 4px solid #409EFF;
    padding-left: 8px;
}

.notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notice-item {
    padding: 6px 0;
    cursor: pointer;
    display: flex;
    gap: 8px;
    color: #333;
    transition: all 0.2s;
}

.notice-item:hover {
    color: #409EFF;
}

.date {
    color: #999;
    min-width: 90px;
}

.title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notice-wrapper {
    display: flex;
    flex: 1;
    gap: 2%;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 12px;
    margin-left: 1%;
    margin-top: 1%;
}

.quickEntrance {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
    /* margin-bottom: 10px; */
    padding: 10px;
    border-radius: 5px;
}

.cardbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
}

.selectcard {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    border-radius: 4px;
    margin: 0 20px 20px 0;
    color: #555555;
    cursor: pointer;
    font-weight: 400;
    padding: 20px;
}
.selectcard:hover {
    background-color: #e6f7ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
.icon {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
</style>